<template>
  <div class="topic-detail-container">
    <div class="topic-detail-container__search">
      <div class="search-box">
        <div class="search-box__hidden" ref="hideSearchCard" v-if="searchWord&&showHideCard">
          <nuxt-link tag="div" :to="'/topic/detail/'+val.topicName" class="search-box__hidden-item" v-for="(val,index) in topicList" :key="val.topicId">
            <p>#{{val.topicName}}#</p>
            <h6>{{val.referenceCount}}</h6>
          </nuxt-link>
          <div class="search-box__hidden-item" v-if="topicList.length===0">
            <p style="color:#6d61bee8">找不到该话题</p>
          </div>
        </div>
        <input ref="searchInput" placeholder="请输入话题名称" type="text" v-model="searchWord"/>
        <div class="icon-box">
          <yun-icon name="search"></yun-icon>
        </div>

      </div>
    </div>
    <div class="topic-detail-container__main">
      <div class="topic-list-card">
        <div class="topic-list-card__left">序号</div>
        <div class="topic-list-card__center">
          话题
        </div>
        <div class="topic-list-card__right">
          实时更新
        </div>
      </div>

       <topic-list v-for="(val,index) in hotSearchList" :info="val" :number="index+1" :key="val.topicId" ></topic-list>
    </div>



  </div>
</template>

<script>
  import NavWrap from "../../components/pc/nav/navWrap";
  import TopicList from "../../components/pc/topicListCard";
  import config from '../../action/config'
  export default {
    components: {NavWrap, TopicList},
    data(){
      return{
        topicList:[],
        pages:1,
        hotSearchList:[],
        searchWord:'',
        showHideCard:true,
      }
    },
    created() {
      this.dataGetHotTopic();
      if(process.browser){
        document.addEventListener('click',(e)=>{
          if(this.$refs.hideSearchCard){
            if(!this.$refs.hideSearchCard.contains(e.target)){
              this.showHideCard = false;
            }
          }
        })
      }
    },

    watch:{
      searchWord(val){
        this.dataGetSearchTopic(val)
        this.showHideCard = true;
      },
    },

    methods:{


      dataGetSearchTopic(e){
        this.$axios.$get(config.api.get.Topic.search,{
          params:{
            page:1,
            size:10,
            keywords:e,
          }
        }).then((response)=>{
          this.topicList = response.data.dataList;
        })
      },
      dataGetHotTopic(){
        this.$axios.$get(config.api.get.Topic.hotSearch,{
          params:{
            page:1,
            size:30
          }
        }).then((response)=>{
          this.hotSearchList = response.data.dataList;
        })
      },


    },
  }
</script>

<style lang="scss" scoped>
  .topic-detail-container{
    .topic-detail-container__search{
      width: 100%;
      height:160*$length;
      background-image: url("../../assets/img/search_bg.png");
      background-position: 50% 50%;
      background-size: 100% 100%;
      background-repeat: repeat;
      @extend %flex-row-center;
      .search-box{
        width:408*$length;
        height:40*$length;
        @extend %flex-row-spb;
        border-radius: 4*$length;
        position: relative;

        input{
          width: 318*$length;
          height:40*$length;
          padding:12*$length 16*$length;
          @include fontStyle(12,40,500,#333,left);
        }
        .icon-box{
          width:90*$length;
          height:40*$length;
          @extend %flex-row-center;
          background-color: #00AAE6;
          @include fontStyle(12,40,500,#333,left);
          @extend %cursorPointer;
          i{
            color:#fff;
            font-size: 12*$font-size;
          }
        }
        .search-box__hidden{
          position: absolute;
          width:408*$length;
          padding: 6*$length 10*$length;
          box-sizing: border-box;
          top:48*$length;
          background-color: #fff;
          z-index: 100;
          .search-box__hidden-item{
            @extend %flex-row-spb;
            padding: 5px 10px;
            background-color: #fff;
            &:hover{
              background-color: #F5F7FA;
            }
            p{
              width:350*$length;
              @include fontStyle(12,24,500,#333,left);
              @extend %animate-transition;
              cursor: pointer;
              overflow: hidden;
              b{
                font-weight: 700;
              }
            }
            h6{
              @include fontStyle(12,24,500,#333,left);

            }
          }

        }

      }
    }
    .topic-detail-container__main{
      width: $pageWidth;
      box-sizing: border-box;
      padding:0 106*$length;
      margin: 30*$length auto;
      padding-bottom: 32*$length;
      background-color: #fff;
      .topic-list-card{
        width: 1044*$length;
        padding-top: 23*$length;
        height: 35*$length;
        margin-bottom: 50*$length;
        @extend %flex-row-spb;
        justify-content: flex-start;
        .topic-list-card__left{
          width: 110*$length;
          @include fontStyle(12,12,500,#222,right);
        }
        .topic-list-card__center{
          width: 424*$length;
          margin-left: 99*$length;
          @include fontStyle(12,17,500,#222,left);
          > span{
            @extend %animate-transition;
            &:last-child{
              margin-left: 24*$length;
              @include fontStyle(12,12,500,#999,left);
            }
          }
        }
        .topic-list-card__right{
          flex: 1;
          @include fontStyle(12,12,500,#999,right);
        }
      }
    }
  }
</style>
